<template>
  <div id="data-view">
    <div class="main-header">
      <div class="mh-left">GIS2018</div>
      <div class="mh-middle">Social Media Data Screen</div>
      <div class="mh-right">
        <dv-border-box-2
          style="
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-left: 200px;
          "
        >
          <div @click="goOff()">return</div>
        </dv-border-box-2>
      </div>
    </div>

    <dv-border-box-1 class="main-container">
      <div class="mc">
        <div class="left-container">
          <Left-Top-Cmp />
          <Left-Bottom-Cmp />
        </div>
        <div class="right-container">
          <Right-Table-1 />
          <Right-Table-2 />
        </div>
      </div>
    </dv-border-box-1>
  </div>
</template>

<script>
import LeftTopCmp from "./LeftTopCmp";
import LeftBottomCmp from "./LeftBottomCmp";

import RightTable1 from "./RightTable1";
import RightTable2 from "./RightTable2";

export default {
  name: "DataView",
  components: {
    LeftTopCmp,
    LeftBottomCmp,
    RightTable1,
    RightTable2,
  },
  data() {
    return {};
  },
  methods: {
    goOff() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  border-radius: 20px;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .mc {
      box-sizing: border-box;
      padding: 30px;
      display: flex;
      height: 100%;
    }

    .left-container {
      width: 35%;
    }
    .left-bottom-cmp {
      padding-top: 5px;
      height: 300px;
    }

    .right-container {
      width: 65%;
      padding-left: 10px;
      box-sizing: border-box;
      display: flex;
    }
  }
}
</style>